<template>
    <div>
        <el-table :data="tableData" style="width: 100%">
            <!-- <el-table-column prop="roleName" label="角色名称" width="180" /> -->
            <el-table-column label="角色名称">
                <template #default="scope">
                    <el-popover placement="right" title="权限详情" :width="200" trigger="hover"
                        @before-enter="handleHover(scope.row)">
                        <template #reference>
                            <el-button class="m-2">{{ scope.row.roleName }}</el-button>
                        </template>
                        <template #default>
                            <el-tree style="max-width: 600px" :data="rightList" :props="defaultProps"
                                :default-expand-all="true" :render-content="renderContent" />
                        </template>
                    </el-popover>
                </template>
            </el-table-column>

            <el-table-column label="操作">
                <template #default="scope">
                    <el-button type="primary" round @click="handleUpdate(scope.row)">更新</el-button>
                    <el-popconfirm title="你确定要删除吗？" @confirm="handleDelete(scope.row)" confirm-button-text="确定"
                        cancel-button-text="取消">
                        <template #reference>
                            <el-button type="danger" round>删除</el-button>
                        </template>
                    </el-popconfirm>
                </template>
            </el-table-column>
        </el-table>

        <!-- 弹出 -->
        <el-dialog v-model="dialogVisible" title="更新角色" width="500">
            <span>
                <el-form ref="updateFormRef" style="max-width: 600px" :model="updateForm" :rules="rules"
                    label-width="auto" class="demo-ruleForm" status-icon>
                    <el-form-item label="角色名称" prop="roleName">
                        <el-input v-model="updateForm.roleName" />
                    </el-form-item>
                    <el-form-item label="角色权限" prop="rights">
                        <el-tree style="max-width: 600px" :data="rightList" :props="defaultProps" show-checkbox
                            node-key="path" ref="treeRef" check-strictly="false" />
                    </el-form-item>
                </el-form>
            </span>
            <template #footer>
                <div class="dialog-footer">
                    <el-button @click="dialogVisible = false">取消</el-button>
                    <el-button type="primary" @click="handleConfirm()">
                        更新
                    </el-button>
                </div>
            </template>
        </el-dialog>
    </div>
</template>

<script setup>
import { ref, reactive, onMounted, nextTick } from 'vue'
import axios from 'axios';

const tableData = ref([])
const rightList = ref([])

onMounted(() => {
    getList()
    getRightList()
})

const getList = async () => {
    const res = await axios.get("/adminapi/roles")
    tableData.value = res.data
}

const getRightList = async () => {
    const res = await axios.get("/adminapi/rights")
    rightList.value = res.data
}

// 指定读取字段
const defaultProps = {
    children: 'children',
    label: 'title',
}

const currentRights = ref([])
const handleHover = ({ rights }) => {
    // console.log(rights);
    currentRights.value = rights
}

// 自定义tree节点回调函数
const renderContent = (
    h,
    {
        node,
        data,
        store,
    }
) => {
    return h(
        'span',
        {
            class: `custom-tree-node ${currentRights.value.includes(data.path) ? 'active' : ''}`,
        },
        h('span', null, node.label),

    )
}

// 更新回调方法
const handleUpdate = (item) => {
    dialogVisible.value = true
    updateForm.roleName = item.roleName
    currentItem.value = item
    // 设置rights给tree
    nextTick(() => {
        treeRef.value.setCheckedKeys(JSON.parse(item.rights))
    })
}
// 表单校验
const dialogVisible = ref(false)
const updateFormRef = ref()
const currentItem = ref({})
const updateForm = reactive({
    roleName: "",
})
// 表单校验
const rules = reactive({
    roleName: [
        { required: true, message: '请输入角色名称', trigger: 'blur' }
    ],
})

// 更新tree
const treeRef = ref()

// 弹出框确定方法
const handleConfirm = async () => {
    // console.log(updateForm.roleName, treeRef.value.getCheckedKeys());

    await axios.put(`/adminapi/roles/${currentItem.value.id}`, {
        roleName: updateForm.roleName,
        rights: JSON.stringify(treeRef.value.getCheckedKeys())
    })

    await getList()
    dialogVisible.value = false
}

// 删除
const handleDelete = async (item) => {
    await axios.delete(`/adminapi/roles/${item.id}`)

    await getList()
   
}

</script>

<style lang="less" scoped>
:deep(.active) {
    color: #f56c6c;
}
</style>